<template>
	<view class="container-dialInfo">
		<view class="dialInfo-item-box" v-for="(item,index) in resultList" :key="index">
			<view class="dialInfo-item-nav">
				<view class="network">
					<text>{{$t('bound.name41')}}:</text>
					<text>{{item.name}}</text>
				</view>
				<view class="rate">
					<text>{{$t('bound.name42')}}:</text>
					<text>{{item.speed}}M</text>
				</view>
				<!-- <view class="rate">
					<text>IP:</text>
					<text>{{item.ip}}</text>
				</view> -->
			</view>
			<view class="" style="font-size: 12px;color: #8c8c8c;margin: 10rpx 0;">{{$t('bound.name43')}}{{item.dialingInfo.length - 1}}{{$t('bound.name44')+$t('bound.name45')}}
			</view>
			<view class="dialInfo-table">
				<view class="tr bg-w">
					<view class="th flex-center">vlan_id</view>
					<view class="th" style="width: 60%;">{{$t('netCard.name36')}}/{{$t('netCard.name37')}}</view>
					<view class="th" style="width: 30%;">{{$t('netCard.name38')}}</view>
					<view class="th flex-center"><u-icon name="trash" color="#1D93FF" size="22"></u-icon></view>
				</view>
				<view class="tr" v-for="(val,ind) in item.dialingInfo" :key="ind">
					<view class="td flex-center"><input type="text" :focus="val.focus" :disabled="val.disabled"
							v-model="val.vlanId" placeholder="vlan_id" placeholder-class="table-placeholder"></view>
					<view class="td" style="width: 60%;">
						<input v-if="!val.disabled" type="text" :disabled="val.disabled" v-model="val.ipmask" :placeholder="$t('netCard.name49')+$t('netCard.name36')+'/'+$t('netCard.name37')" placeholder-class="table-placeholder">
						<text v-else style="word-wrap:break-word;">{{val.ipmask}}</text>
						</view>
					<view class="td" style="width: 50%;"><input type="text" :disabled="val.disabled"
							v-model="val.gateway" :placeholder="$t('netCard.name38')" placeholder-class="table-placeholder"></view>
					<view class="td flex-center">
						<view class="flex-center" style="display: flex;" v-if="!val.disabled"
							@tap="handleAddVlan(val,index,ind)">
							<u-icon name="checkmark-circle" color="#02b602" size="22"></u-icon>
						</view>
						<view class="flex-center" style="display: flex;" v-else>
							<view class="" @tap="handleEdit(val,ind,item.name)">
								<u-icon name="edit-pen" color="" size="22"></u-icon>
							</view>
							<view @tap="handleDeleteVlan(index,ind)">
								<u-icon name="trash" color="#1D93FF" size="22"></u-icon>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="submit-btn">
				<view class="">
					<u-button @click="handleVlanAll(index)" type="warning" size="small" customStyle="width: 150rpx"
						color="#1D93FF" shape="circle" :text="$t('bond.name49')"></u-button>
				</view>
			</view>
		</view>
		<view class="bottom flex">
			<u-button type="warning" customStyle="width: 300rpx" color="#9a9898" shape="circle" :text="$t('netCard.name41')"
				@click="handleNetCard"></u-button>
			<u-button type="warning" customStyle="width: 300rpx" color="#1D93FF" shape="circle" :text="$t('bound.name50')"
				@click="handleNext"></u-button>
		</view>
		<!-- 弹窗 -->
		<u-popup :show="show" @close="close" @open="open" mode="center" :round="10" overlay closeable style=""
			:customStyle="{width:'700rpx',height:'550rpx'}">
			<view class="popup-box">
				<view class="item1">{{$t('bound.name51')}}</view>
				<view class="item2">vlan-id {{$t('netCard.name36')}}/{{$t('netCard.name37')}} {{$t('netCard.name38')}}</view>
				<view class="item3">
					<textarea name="" style="background-color: #f5f5f5;width: 100%;" v-model="value1" id=""
						maxlength="-1" :placeholder="$t('bound.name53')"></textarea>
				</view>
				<view class="popup-bottom">
					<text class="text">{{$t('bound.name54')}}</text>
					<view class="btn-box">
						<view class="">
							<u-button @click="closeTextarea" color="#d0d0d0" size="small"
								customStyle="width: 80rpx;color:#141414;font-weight: 600;" shape="circle"
								:text="$t('bound.name55')"></u-button>
						</view>
						<view class="">
							<u-button @click="handleIdentify" type="warning" size="small" customStyle="width: 80rpx"
								color="#1D93FF" shape="circle" text="识别"></u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- <view class="" v-if="isNicShow" style="margin-top: 300rpx;">
			<u-empty mode="search" text="未获取到网卡">
				<view class="" style="display: flex;align-items: center;margin: 30rpx;" @tap="handleNic(10)">
					<view class="">
						<u-icon name="reload" color="#1D93FF" size="22"></u-icon>
					</view>
					<text class="" style="color: #8c8c8c;font-size: 14px;">
						刷新重试
					</text>
				</view>
			</u-empty>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				value1: '',
				searchVal: '',
				loading: false,
				add: false,
				ids: '',
				nicList: [],
				vlanActive: 0,
				errMsg: true,
				isNicShow: false,
				Times: 0,
				timeOut: null,
				focusObj: {},
				resultList: []
			}
		},
		onLoad(options) {
			this.ids = options.ids
		},
		onShow() {
			this.getDialingInfo()
		},
		onHide() {
			clearInterval(this.timeOut)
		},
		beforeDestroy() {
			clearInterval(this.timeOut)
		},
		methods: {
			async getDialingInfo() {
				uni.showLoading({
					title: '',
					mask: true
				})
				const res = await this.$fun.ajax.post('bind/dialingInfo', {
					ids: this.ids
				})
				uni.hideLoading()
				const data = res.data.netcards.filter(item => {
					if (item.isValid && !item.isManager) {
						item.dialingInfo.forEach(v => {
							v.ipmask = `${v.ip}/${v.mask}`
							v.disabled = true
							v.focus = false
						})
						item.dialingInfo.push({
							vlanId: '',
							ipmask: '',
							gateway: '',
							disabled: false,
							focus: false
						})
						return item
					}
				})
				this.resultList = data
			},
			// 批量添加
			handleVlanAll(index) {
				this.show = true
				this.vlanActive = index
			},
			closeTextarea() {
				this.value1 = ''
			},
			// 批量添加识别
			handleIdentify() {
				const vlanData = this.value1.split(' ').join(',').split(('\n'))
				vlanData.forEach((v, i) => {
					const valArr = v.split(',')
					if (valArr[0]) {
						this.resultList[this.vlanActive].dialingInfo[i] = {
							vlanId: valArr[0],
							ipmask: valArr[1],
							gateway: valArr[2],
							disabled: true,
							focus: false
						}
					}


				})

				const newArr = this.resultList[this.vlanActive].dialingInfo[this.resultList[this.vlanActive].dialingInfo
					.length - 1]
				if (newArr.vlanId && newArr.ipmask && newArr.gateway) {
					this.resultList[this.vlanActive].dialingInfo = [...this.resultList[this.vlanActive].dialingInfo, {
						vlanId: '',
						ipmask: '',
						gateway: '',
						disabled: false,
						focus: true
					}]
				} else {
					this.resultList[this.vlanActive].dialingInfo[this.resultList[this.vlanActive].dialingInfo.length -
						1] = {
						vlanId: '',
						ipmask: '',
						gateway: '',
						disabled: false,
						focus: true
					}
				}
				this.show = false
				this.closeTextarea()
			},
			handleAddVlan(val, i, ind) {
				if (val.vlanId && val.ipmask && val.gateway) {
					val.disabled = true
					if (ind === this.resultList[i].dialingInfo.length - 1) {
						this.resultList[i].dialingInfo.push({
							vlanId: '',
							ipmask: '',
							gateway: '',
							disabled: false,
							focus: true
						})
					}

				} else {
					return this.$fun.msg(this.$t('bound.name62'))
				}
			},
			// 修改
			handleEdit(val, i, name) {
				val.focus = false
				val.disabled = false
				setTimeout(() => {
					val.focus = true
				}, 100)
			},
			handleDeleteVlan(index, ind) {
				const that = this
				uni.showModal({
					title: this.$t('bound.name60'),
					content: this.$t('netCard.name61'),
					success: function(res) {
						if (res.confirm) {
							that.resultList[index].dialingInfo.splice(ind, 1)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 同步网卡信息
			async handleNetCard() {
				uni.showLoading({
					title: '',
					mask: true
				})
				const res = await this.$fun.ajax.post('bind/syncNetcard', {
					ids: this.ids
				})
				uni.hideLoading()
			},
			//开始拨号
			async handleNext() {
				const list = []
				this.resultList.forEach(item => {
					item.dialingInfo.forEach(val => {
						if (val.disabled) {
							list.push({
								vlanId: val.vlanId,
								ip: val.ipmask ? val.ipmask.split('/')[0] : val.ip,
								mask: val.ipmask ? val.ipmask.split('/')[1] : val.ip,
								gateway: val.gateway,
								name: item.name,
								// ip: item.ip,
								speed: item.speed,
								// enableV6: 1
							})
						}
					})
				})
				const params = {
					ids: this.ids,
					list: JSON.stringify(list)
				}
				if (!list.length) return this.$fun.msg(this.$t('bound.name62'))
				const res = await this.$fun.ajax.post('bind/saveDialingInfo', params)
				this.$fun.jump(`/pageC/dialResult1/dialResult1?ids=${params.ids}`)
				// this.$fun.jump(`/pageC/settingIPv6/settingIPv6?ids=${this.ids}`)
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
		}
	}
</script>
<style>
	/* #ifndef H5 */
	/* page {
	padding-top: 85px;
} */
	/* #endif */
	.uni-group {
		display: flex;
		align-items: center;
	}
</style>
<style lang="scss">
	page {
		background: #EEEEEE;
	}

	.container-dialInfo {
		padding: 20rpx 20rpx 150rpx 20rpx;
		height: 100%;

		.dialInfo-item-box {
			margin-bottom: 30rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.dialInfo-item-nav {
				display: flex;
				font-size: 14px;

				.network {
					margin-right: 20rpx;
					color: #1D93FF;
				}

				.rate {
					margin: 0 10rpx;
				}
			}

			.dialInfo-table {
				font-size: 28rpx;

				.tr {
					display: flex;
					width: 100%;
					justify-content: center;
					height: 60rpx;
					align-items: center;
					border-radius: 10rpx;
					// margin: 15rpx 0;
					border-bottom: 1rpx solid #eee;
					padding: 20rpx 0;
					box-sizing: content-box;
				}

				.td {
					width: 40%;
					// justify-content: center;
					// text-align: center;
					overflow: hidden;
					margin: 0 10rpx;
					font-size: 28rpx;
				}

				.flex-center {
					justify-content: center;
					// text-align: center;
				}

				.th {
					width: 40%;
					color: #000;
					display: flex;
					height: 3rem;
					align-items: center;
					overflow: hidden;
					margin: 0 10rpx;
				}

				.bg-w {
					background: #f0f0f0;
				}

				th {
					font-weight: 400;
				}

				.table-placeholder {
					font-size: 22rpx;
				}

				.delete {
					.u-icon--right {
						flex-direction: column;
					}
				}
			}

			.submit-btn {
				margin-top: 10rpx;
				font-size: 14px;
				display: flex;
				justify-content: flex-end;
			}
		}

		.bottom {
			background-color: #fff;
			height: 150rpx;
			position: fixed;
			z-index: 99;
			bottom: 0;
			left: 0;
			right: 0;
			padding-top: 30rpx;

		}

		.popup-box {
			padding: 10rpx 20rpx;
			position: relative;
			height: 100%;

			.item1 {
				font-size: 14px;
				font-weight: 700;
				margin: 5rpx 0;
			}

			.item2 {
				font-size: 12px;
				color: #1D93FF;
			}

			.item3 {
				margin: 30rpx 0;
				padding: 10rpx 0;
			}

			.popup-bottom {
				position: absolute;
				/* #ifdef MP-WEIXIN */
				bottom: -40rpx;
				/* #endif */
				/* #ifndef MP-WEIXIN */
				bottom: 20rpx;
				/* #endif */
				left: 20rpx;
				right: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.text {
					font-size: 12px;
					color: #fe020e;
					margin-right: 20rpx;
					white-space: nowrap;
					// overflow: hidden;
					// text-overflow: ellipsis; /* 可选，当内容超出一行时，用省略号表示 */
				}

				.btn-box {
					flex: 1;
					display: flex;
					justify-content: space-between;

				}
			}
		}

	}
</style>